<div class="p-12 flex flex-col justify-center gap-10">

    <x-filament::tabs label="Content tabs">

        <x-filament::tabs.item
            :active="$status == 'all'"
            wire:click="$set('status', 'all')"
        >
            全部
        </x-filament::tabs.item>
        @foreach($tabs as $key => $tab)

            <x-filament::tabs.item
                :active="$status == $key"
                wire:click="$set('status', '{{$key}}')"
            >
                {{$tab}}
            </x-filament::tabs.item>
        @endforeach

    </x-filament::tabs>

    <div class="w-6/12 mx-auto min-h-80 h-full overflow-y-auto sm:px-6 lg:px-8 flex flex-col gap-10">
       @foreach($books as $book)
        <div class="flex shadow-xl  bg-white cursor-pointer transition ease-in-out duration-300 hover:-translate-y-1  sm:rounded-lg px-2 py-4 gap-10" wire:key="{{$book->id}}">
            <div class="flex items-center">
                <div class="overflow-hidden w-24 h-28 rounded-md">
                    <img wire:ignore class="w-full h-full" src="{{\Illuminate\Support\Facades\Storage::url($book->book->img)}}" alt="">
                </div>
            </div>

            <div class="flex flex-col gap-2 flex-1">
                <div class="text-black font-bold">{{$book->book->title}}</div>
                <div class="text-gray-400 text-sm "> {{$book->book->author}}</div>
                <div class="text-gray-400 text-sm "> 数量 * 1</div>

            </div>
            <div class="flex-col flex gap-4 border-l border-gray-200 px-6">
                <div class="text-sm text-gray-400">
                    借阅时间: {{$book->borrow_date}}
                </div>
                <div class="text-sm text-gray-400">
                    到期时间: {{$book->deadline}}
                </div>
                @if($book->returned->hasReturn())
                    <div class="text-sm text-gray-400">
                        归还时间: {{$book->due_date}}
                    </div>
                @endif
                <x-filament::badge :color="$book->returned->getColor()">
                    {{$book->returned->getLabelText()}}
                </x-filament::badge>
                <div class="text-gray-400 line-clamp-2 text-sm text-ellipsis ">备注: {{$book->remark}}</div>
            </div>
            <div class="flex-col flex gap-4 border-l border-gray-200 px-6">
                <div class="text-sm text-gray-400 border-b border-gray-200 w-[100px] text-center">
                    操作
                </div>
                @if($book->returned == \App\Enums\BorrowStatus::STATUS_BORROWING && !$book->renewal)
                    <x-filament::button wire:click="renewalBorrowRecord({{ $book->id }})" tooltip="可以在有效期内续期一次" wire:target="renewalBorrowRecord({{ $book->id }})">
                        续借
                    </x-filament::button>
                @endif


            </div>
        </div>
        @endforeach
           <div class="flex justify-center w-full my-10">
               {{ $books->links() }}
           </div>
    </div>
</div>
